<template>
  <div class="login-container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="userAccount"
            name="userAccount"
            label="账户"
            placeholder="请输入账户"
            :rules="[{ required: true, message: '请填写账户' }]"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="button-container">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
        <van-button round block type="info" @click="onRegister">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import myAxios from "../plugins/myAxios";
import { showFailToast, showSuccessToast } from "vant";

const router = useRouter();
const route = useRoute();
const userAccount = ref('');
const userPassword = ref('');

const onSubmit = async () => {
  const res = await myAxios.post('/user/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value,
  });
  console.log(res, '用户登录');
  if (res.code === 0 && res.data) {
    showSuccessToast('登录成功');
    const redirectUrl = (route.query?.redirect as string) ?? '/';
    window.location.href = redirectUrl;
  } else {
    showFailToast('登录失败');
  }
};

const onRegister = () => {
  router.push('/user/register');
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fae9b6cab-8fd7-4464-8003-b066f10b4b91%2F.webp?table=block&id=de5a4c2f-e18f-49a5-8227-6fa4e3f0c730&t=de5a4c2f-e18f-49a5-8227-6fa4e3f0c730&width=800&cache=v2') no-repeat center center;
  background-size: cover;
}

.button-container {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}

.van-form {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.van-button {
  flex: 1;
}
</style>
